<template>
    <div  class="app-container">
    <el-table
        :data="list"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="load"
        :tree-props="{hasChildren: 'hasChildren'}">

        <el-table-column
        prop="name"
        label="名称"
        width="150">
        </el-table-column>

        <el-table-column
        prop="dictCode"
        label="编码"
        width="150">
        </el-table-column>

        <el-table-column
        prop="value"
        label="值"
        width="150">
        </el-table-column>

        <el-table-column
        prop="createTime"
        label="创建时间">
        </el-table-column>

    </el-table>

    <div class="el-toolbar">
    <div class="el-toolbar-body" style="justify-content: flex-start;">
    	<el-button type="primary" icon="el-icon-download" @click="exportData"><i class="fa fa-plus"/> 导出</el-button>
        <el-button type="primary" icon="el-icon-upload2" @click="importData"><i class="fa fa-plus"/> 导入</el-button>
    </div>
    </div>
<el-dialog title="导入" :visible.sync="dialogImportVisible" width="480px">
    <el-form label-position="right" label-width="170px">
        <el-form-item label="文件">
            <el-upload
                       :multiple="false"
                       :on-success="onUploadSuccess"
                       :action="'http://localhost:8202/admin/cmn/dict/importData'"
                       class="upload-demo">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传xls文件，且不超过500kb</div>
            </el-upload>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogImportVisible = false">取消</el-button>
    </div>
</el-dialog>

    </div>
</template>


<script>
import cmn from '@/api/cmn';
export default {
    data() {
        return {
            dialogImportVisible:false,//弹出层是否显示
            list:[] //数据字典列表数组
        }
    },
    created() {
        this.fetchData(1)
    },
    methods: {
        //上传文件回调
        onUploadSuccess(reponse,file){
            if(reponse.code==20000){
                this.$message.success("上传成功");
                //隐藏弹窗
                this.dialogImportVisible=false;
                //重新加载数据
                this.fetchData(1);
            }else{
                this.$message.error(reponse.message);
            }
        },
        //导入excel 文件
        importData(){
            //显示弹出层
            this.dialogImportVisible=true;
        },
        //导出Excle 文件
        exportData(){
            //打开新的标签页
            window.open("http://localhost:8202/admin/cmn/dict/exportData")
        },
        //数据字典列表
        fetchData(parentId) {
            cmn.getChildren(parentId)
                .then(response => {
                    this.list = response.data.list
                })
        },
        load(tree, treeNode, resolve) {
            cmn.getChildren(tree.id).then(response => {
                resolve(response.data.list)
            })
      }
    }
}
</script>
